<ion-header class="ion-no-border ion-no-shadow">
	<ion-toolbar>
		<ion-title>
			{{ 'WALLETS_PAGE.LABEL' | translate }}
		</ion-title>
		<ion-buttons slot="end">
			<ion-button (click)="closeModal()">
				<ion-icon slot="icon-only" name="close"></ion-icon>
			</ion-button>
		</ion-buttons>
	</ion-toolbar>
</ion-header>

<ion-content forceOverscroll="false" fullscreen class="ion-padding">
	<ion-grid class="h-full flex flex-col justify-center items-center">
		<form #labelForm="ngForm" class="w-full text-center">
			<ion-item>
				<ion-label position="floating"
					>{{ 'WALLETS_PAGE.NEW_WALLET_NAME' | translate }}</ion-label
				>
				<ion-input
					type="text"
					name="name"
					[(ngModel)]="label"
					required
				></ion-input>
			</ion-item>
			<ion-button
				class="mt-8"
				color="primary"
				[disabled]="!labelForm.form.valid"
				(click)="submitForm()"
			>
				{{ 'RENAME' | translate }}
			</ion-button>
		</form>
	</ion-grid>
</ion-content>
